<template>
  <div class="content">
    <el-tree
      :data="data"
      :props="defaultProps"
      @node-click="handleNodeClick"
    ></el-tree>
  </div>
</template>
<script>
export default {
  data() {
    return {
      value: new Date(),
      data: [
        {
          label: "一级 1",
          children: [
            {
              label: "二级 1-1",
              children: [
                {
                  label: "三级 1-1-1",
                },
              ],
            },
          ],
        },
        {
          label: "一级 2",
          children: [
            {
              label: "二级 2-1",
              children: [
                {
                  label: "三级 2-1-1",
                },
              ],
            },
            {
              label: "二级 2-2",
              children: [
                {
                  label: "三级 2-2-1",
                },
              ],
            },
          ],
        },
        {
          label: "一级 3",
          children: [
            {
              label: "二级 3-1",
              children: [
                {
                  label: "三级 3-1-1",
                },
              ],
            },
            {
              label: "二级 3-2",
              children: [
                {
                  label: "三级 3-2-1",
                },
              ],
            },
          ],
        },
      ],
      defaultProps: {
        children: "children",
        label: "label",
      },
      isPress: false,
    };
  },
  methods: {
    handleNodeClick(data) {
      if (this.isPress) console.log(data);
    },
  },
  mounted() {
    window.addEventListener("keydown", () => {
      this.isPress = true;
    });
    window.addEventListener("keyup", () => {
      this.isPress = false;
    });
  },
};
</script>
<style lang="less" scoped>
.content {
  padding: 20px;
}
</style>
